<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/folw_1.png" mode="widthFix" class="back"></image>
				<view class="tit">激活广告机</view>
				<image src="/static/images/folw_5.png" mode="widthFix" class="reset"></image>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--内容start-->
		<view class="flow_con">
			<huihui-progress originalColor="#dfdfde" processColor="#1aac8c"  :process="process" :startPosDegree="0" :radius="160"  :barWidth="35">
				<image src="/static/images/folw_12.png"></image>
			</huihui-progress>
		</view>
		
		<view class="flow_con_tit">
			<text class="percentages">{{process}}%</text>
			<view class="tit">无缝整合</view>
			<view class="con">完整的技术堆栈集成可以精准连接全球各地高级发行商和近<text>300</text>个<text>DSP</text>，自带<text>DSP</text>、<text>SSP</text>、<text>DMP</text>的平台为我们在优质市场获得优先访问权创造了条件，我们将在选定的主要广告网络以及<text>DSP</text>和交易平台之间保持平衡，以确保我们的会员从每个机会中获得可观的收入来源。</view>
		</view>
		<!--内容end-->
		
		<!--弹窗start-->
		<u-popup mode="bottom" :show="success_box" :closeOnClickOverlay="true" @close="succees_popup_close" customStyle="background: none" >
			<view class="success_box">
				<!--<text class="close" @tap="succees_popup_close"></text>-->
				<image src="/static/images/img_11.png"></image>
				<view class="con">广告机已激活<text>正转至“已启动”页面</text></view>
			</view>
		</u-popup>
		<!--弹窗end-->
		
		<!--底部start-->
		<view class="f_btn">
			<button class="submit" :class="[process == 100 ? 'on':'']" @click="open_success_box">（<b>6/6</b>）激活 <view></view></button>
			<u-safe-bottom></u-safe-bottom><u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
	</view>
</template>


<script>
export default {
	data() {
		return {
			process:0,
			timer:'',
			success_box: false
		}
	},
	created() {
		this.change()
	},
	methods: {
		change(){
		    this.timer=setInterval(()=>{
		    this.process+=1
		    if(this.process>=100){
				this.process=100
				clearInterval(this.timer)
		    }
		    },100)
		},
		open_success_box(){
			this.success_box = true
		},
		succees_popup_close(){
			this.success_box = false
		}
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("machine.scss");

page{
	background: #332C2B;
}
.header{
	background-color: #332C2B;
}
.header .tit{
	color: #DCDDDD;
}
.f_btn .submit{
	background-color: #5F5D5D;
	color: #A1A1A1;
}
.f_btn .submit view{
	width: 32rpx;
	height: 32rpx;
	margin-left: 20rpx;
	background: url("/static/images/folw_7.png") no-repeat center center;
	background-size: 32rpx auto;
}
.f_btn .submit.on{
	background-color: #4AB893;
	color: #FEFEFE;
}
.f_btn .submit.on view{
	background-image: url("/static/images/folw_7a.png");
}
</style>
